import React from 'react';
import { View, Image } from '@tarojs/components';

import { getChineseGradientColors } from '../utils/common';
import ImageLoader from './ImageLoader';
import './userAvatar.scss'

interface userAvatarProps {
    avatar?: string;
    user_id?: number;
    user_name: string;
    class_name?: string;
    isFlexContainer?: boolean;
    isTourist?: boolean;
}

/**
 * 用户图像展示组件
 * @param {userAvatarProps} props - 组件属性
 * @returns {JSX.Element} 渲染的城市基地图片展示组件
 */
export const UserAvatarImage: React.FC<userAvatarProps> = ({ 
    avatar,
    user_id,
    user_name,
    isTourist = false
}) => {

    if (isTourist) {
        return ( 
            <ImageLoader
                src={avatar || ''}
                className='avatar-image'
                mode="aspectFill"
            /> );
    }
    if (!user_id) {
        return <></>
    }
    
    return (
        <View className='avatar-image-container'>
            {avatar ? (
                <ImageLoader
                    src={avatar}
                    className='avatar-image'
                    mode="aspectFill"
                />
                ) : (
                <View className='avatar-image'
                    style={{
                        background: `linear-gradient(135deg, ${getChineseGradientColors(user_id)[0]}, ${getChineseGradientColors(user_id)[1]})`,
                    }}>
                    {user_name.charAt(0).toUpperCase()}
                </View>
            )}
        </View>
    );
};
